<template>

    <n-flex justify="center">
        <n-form label-placement="left" label-width="180">
            <FormItemComponent title="回测股票：" tips="设置初始资金">
                <n-select placeholder="请选择回测的股票" v-model:value="stock_form.stock_id" :options="options.stock_list" />
            </FormItemComponent>
            <FormItemComponent title="回测日期区间：" tips="设置初始资金">
                <n-select placeholder="请选择回测的日期区间" class="w-96" v-model:value="stock_form.date_range"
                    :options="options.date_range_list" />
            </FormItemComponent>
            <FormItemComponent title="实例选择方式：" tips="设置初始资金">
                <n-radio-group v-model:value="if_recommend" @update:value="changeSelectType(if_recommend)">
                    <n-radio label="数据推荐" :value="true" />
                    <n-radio label="自行选择" :value="false" />
                </n-radio-group>
            </FormItemComponent>
            <FormItemComponent v-if="if_recommend != null" title="回测实例：" tips="设置初始资金">
                <span >{{ item_label }}</span>
                <!-- <n-input class="w-96" placeholder="请在下方选择实例" disabled :value="item_label" /> -->
            </FormItemComponent>
            <template v-if="if_recommend">
                <div class="w-full">
                    <n-form label-placement="left" label-width="180">
                        <FormItemComponent title="请输入描述：" tips="设置初始资金">
                            <n-flex class="w-96" vertical>
                                <n-input v-model:value="item_description" type="textarea"
                                    placeholder="例：事件发生时美元汇率上涨/事件发生时日元汇率上涨"></n-input>
                                <n-flex justify="space-between">
                                    <n-button class="w-8/12" secondary>点击查看填写说明</n-button>
                                    <n-button class="w-3/12" @click="getItemLisyByDescription()" secondary>查询</n-button>
                                </n-flex>
                            </n-flex>
                        </FormItemComponent>
                    </n-form>
                </div>
            </template>
        </n-form>
        <n-flex justify="center" class="w-full" v-if="if_recommend != null">
            <n-card class="w-96 m-2"  :bordered="false" v-for="(i, index) in options.item_list" :key="i.id" :title="i.name">
                <template #header-extra>
                    <n-button class="mx-1" @click="emitChoose(i)" type="primary">
                        选择
                    </n-button>
                </template>
                <n-flex>
                    <span v-if="if_recommend">推荐指数： <n-rate readonly :value="5 - index" :default-value="0" /></span>
                    <div class="min-h-12">
                        <n-flex>

                            <template v-if="i.last_date == 1">
                                <span class="text-slate-400">{{ i.start_date.toISOString().slice(0, 10) }} </span>
                            </template>

                            <template v-else>
                                <span class="text-slate-400">{{ i.start_date.toISOString().slice(0, 10) }}至{{
                    i.end_date.toISOString().slice(0, 10) }} </span>
                            </template>
                            <span class="text-slate-400">持续时间：{{ i.last_date }}天</span>
                        </n-flex>
                    </div>
                    <span>描述：{{ i.description }}</span>

                </n-flex>
            </n-card>

        </n-flex>
    </n-flex>
</template>

<script setup>
import FormItemComponent from '@/components/FormItemComponent.vue';
import { ref, watch, reactive, onMounted } from "vue";
import { useStockStore } from '@/stores/stockStore';
import { useScenarioStore } from '@/stores/scenarioStore';
import { useBacktestStore } from '@/stores/backtestStore';
const stockStore = useStockStore();
const scenarioStore = useScenarioStore();
const backtestStore = useBacktestStore();
const item_label = ref(null);
const if_recommend = ref(false);
const props = defineProps(["stock_form"]);
const emit = defineEmits(["chooseItem"]);
// const stock_form = props.stock_form;
const options = ref({
    stock_list: [],
    date_range_list: [],
    item_list: []
})

const item_description = ref('')
onMounted(async () => {

    options.value.item_list.splice(0, options.value.item_list.length)
    await stockStore.getStockList();
    for (let i of stockStore.stock_list) {
        options.value.stock_list.push({
            label: i.name,
            value: i.id
        })
    }
    options.value.date_range_list.push({
        label: '事件发生前3天至事件结束后3天',
        value: 3
    }, {
        label: '事件发生前7天至事件结束后7天',
        value: 7
    }, {
        label: '事件发生前15天至事件结束后15天',
        value: 15
    })

    
for (let i of scenarioStore.current_scenario.item_list) {
    let temp_item_item = {
        uuid: i.uuid,
        name: i.name,
        start_date: new Date(i.start_date * 1000),
        end_date: new Date(i.end_date * 1000),
        last_date: (i.end_date - i.start_date) / (1000 * 60 * 60 * 24) + 1,
        description: ""
    }
    for (let j of i.attribute_list) {
        temp_item_item.description += j.label + j.value + ';';
    }
    options.value.item_list.push(temp_item_item);
}
})
const changeSelectType = (value) => {
    if (value) {
        options.value.item_list.splice(0, options.value.item_list.length)
    } else {
        for (let i of scenarioStore.current_scenario.item_list) {
            let temp_item_item = {
                uuid: i.uuid,
                name: i.name,
                start_date: new Date(i.start_date * 1000),
                end_date: new Date(i.end_date * 1000),
                last_date: (i.end_date - i.start_date) / (1000 * 60 * 60 * 24) + 1,
                description: ""
            }
            for (let j of i.attribute_list) {
                temp_item_item.description += j.label + j.value + ';';
            }
            options.value.item_list.push(temp_item_item);
        }
    }
}




const emitChoose = (i) => {
    emit("chooseItem", i.uuid);
    // stock_form.value.uuid = i.uuid;
    item_label.value = i.name;
}
const getItemLisyByDescription = async () => {
    let sorted_item_list = await backtestStore.getItemListByDescription(scenarioStore.current_scenario.id, item_description.value);
    options.value.item_list.splice(0, options.value.item_list.length);
    for (let i of sorted_item_list) {
        let temp_item_item = {
            uuid: i.uuid,
            name: i.name,
            start_date: new Date(i.start_date * 1000),
            end_date: new Date(i.end_date * 1000),
            last_date: (i.end_date - i.start_date) / (1000 * 60 * 60 * 24) + 1,
            description: ""
        }
        for (let j of i.attribute_list) {
            temp_item_item.description += j.label + j.value + ';';
        }
        options.value.item_list.push(temp_item_item);
    }

}
</script>